<template>
  <div id="menumanagement">
    <!-- 左侧菜单树 -->
    <div class="dataMenu">
      <el-button type="success" @click="addDialog = true">添加顶级菜单</el-button>
      <el-tree class="menu-tree" v-if="isLoadingTree" :data="menus" node-key="id" highlight-current :props="defaultProps" :expand-on-click-node="false" :render-content="renderContent" :default-expanded-keys="defaultExpandKeys" @node-click="handleNodeClick"></el-tree>
    </div>

    <!-- 操作区域 -->
    <div>
      <el-input v-model="queryName" style="width:200px;" placeholder="请输入菜单名称" prefix-icon="el-icon-search">
      </el-input>
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button type="primary" @click="backTop">顶级节点列表</el-button>
    </div>

    <div class="childrenMenu">
      <el-table :data="childrenMenu" stripe :border="true" element-loading-text="拼命加载中..." style="width: 100%;" max-height='400'>
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column prop="name" label="名称">
        </el-table-column>
        <el-table-column prop="url" label="路径">
        </el-table-column>
        <el-table-column prop="icon" label="图标">
        </el-table-column>
        <el-table-column prop="permissionTarget" label="权限值">
        </el-table-column>
        <el-table-column prop="orderIn" label="排序">
        </el-table-column>
        <el-table-column prop="className" label="类名">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="success" plain size="mini" @click="editorData(scope.row)">编辑</el-button>
            <el-button type="danger" plain size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑 -->
    <el-dialog title="编辑" :visible.sync="editDialog" width="600px">
      <el-form :model="menusItem" ref="menusItem" label-width="80px">
        <el-form-item label="名称" prop="name" :rules="[
                { required: true, message: '请输入显示名称', trigger: 'blur' }
              ]">
          <el-input v-model="menusItem.name"></el-input>
        </el-form-item>
        <el-form-item label="路径" prop="url" :rules="[
                { required: true, message: '请输入Url', trigger: 'blur' }
              ]">
          <el-input v-model="menusItem.url"></el-input>
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="menusItem.icon"></el-input>
        </el-form-item>
        <el-form-item label="类名">
          <el-input v-model="menusItem.className"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="menusItem.orderIn"></el-input>
        </el-form-item>
        <el-form-item label="权限值">
          <el-input v-model="menusItem.permissionTarget"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="text-center">
        <el-button type="primary" @click="handleUpdate('menusItem')">确 定</el-button>
        <el-button @click="editDialog = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog title="添加根节点" :visible.sync="addDialog" width="600px">
      <el-form :model="menusRoot" ref="menusRoot" label-width="80px">
        <el-form-item label="显示名称" prop="name" :rules="[
                { required: true, message: '请输入显示名称', trigger: 'blur' }
              ]">
          <el-input v-model="menusRoot.name"></el-input>
        </el-form-item>

        <el-form-item label="URL" prop="url" :rules="[
                { required: true, message: '请输入Url', trigger: 'blur' }
              ]">
          <el-input v-model="menusRoot.url"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="text-center">
        <el-button type="primary" @click="handleCreate('menusRoot')">确 定</el-button>
        <el-button @click="addDialog = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import MenuRender from "./menu_render";
export default {
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "menuItems",
        label: "name"
      },
      queryName: "",
      defaultExpandKeys: [],
      isLoadingTree: true,
      childrenMenu: [],
      num: 1000,
      editDialog: false,
      menusItem: {
        name: "",
        url: "",
        icon: "",
        className: "",
        orderIn: "",
        permissionTarget: "",
        id: ""
      },
      menusRoot: {
        name: "",
        url: ""
      },
      addDialog: false
    };
  },

  mounted() {
    this.getMenuList();
  },
  methods: {
    backTop() {
      this.childrenMenu = this.menus;
    },

    editorData(row) {
      this.editDialog = true;
      this.menusItem.name = row.name;
      this.menusItem.url = row.url;
      this.menusItem.id = row.id;
      this.menusItem.icon = row.icon;
      this.menusItem.className = row.className;
      this.menusItem.orderIn = row.orderIn;
      this.menusItem.permissionTarget = row.permissionTarget;
    },

    handleUpdate(menusItem) {
      this.$refs[menusItem].validate(valid => {
        if (valid) {
          this.editDialog = false;
          let data = this.menusItem;
          let that = this;
          this.$api.post("/api/Menu/update", data,true).then(rsp => {
            if (rsp != false) {
              that.getMenuList();
            }
          });
        } else {
          alert("请正确格式输入");
          return false;
        }
      });
    },

    initMenuExpand() {
      this.menus.map(a => {
        this.defaultExpandKeys.push(a.id);
      });
      this.isLoadingTree = true;
    },

    renderContent(h, { node, data, store }) {
      let that = this;
      return h(MenuRender, {
        props: {
          DATA: data,
          NODE: node,
          STORE: store
        },
        on: {
          nodeAdd: (s, d, n) => that.handleNodeAdd(s, d, n),
          nodeEdit: (s, d, n) => that.handleNodeEdit(s, d, n),
          nodeDel: (s, d, n) => that.handleDelete(s, d, n)
        }
      });
    },

    handleNodeClick(d, n, s) {
      this.childrenMenu = d.menuItems;
    },

    handleNodeAdd(s, d, n) {
      let _this = this;
      let num = ++this.num;
      let data = {
        parentId: d.id,
        name: "新增节点" + num
      };
      this.$api.post("/api/Menu/create", data,true).then(rsp => {
        if (rsp != false) {
          _this.getMenuList();
        }
      });
    },

    handleNodeEdit(s, d, n) {
      let that = this;
      let data = {
        name: d.name,
        id: d.id
      };
      this.$api.post("/api/Menu/update", data,true).then(rsp => {
        if (rsp != false) {
          that.getMenuList();
        }
      });
    },

    //删除
    handleDelete(s, d, n) {
      let that = this;
      this.$confirm("此操作将永久删除节点, 是否继续?", "提示", {
        type: "warning"
      }).then(() => {
        this.$api.post("/api/Menu/delete", { menuId: d.id }).then(rsp => {
          if (rsp != false) {
            that.getMenuList();
          }
        });
      });
    },

    //获取菜单树
    getMenuList() {
      let _this = this;
      this.$api.get("/api/Menu/getMenuAll", this.permissionModel).then(rsp => {
        if (rsp != false) {
          _this.menus = rsp.data;
          _this.childrenMenu = rsp.data;
          _this.initMenuExpand();
        }
      });
    },

    //新增
    handleCreate(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let _this = this;
          _this.addDialog = false;
          let data = _this.menusRoot;
          this.$api.post("/api/Menu/create", data,true).then(rsp => {
            if (rsp != false) {
              _this.getMenuList();
            }
          });
        }
      });
    },

    //查询
    handleQuery() {
      //查找节点
      let _this = this;
      let data = { name: this.queryName };
      this.$api.get("/api/Menu/getMenuByName", data).then(rsp => {
        if (rsp != false) {
          _this.childrenMenu = rsp.data;
        }
      });
    }
  }
};
</script>
<style>
#menumanagement {
  padding: 0 25px;
}
.dataMenu {
  width: 28%;

  float: left;
  padding-right: 5px;
}
.dataMenu button {
  margin-bottom: 5px;
}
.menu-tree .is-current > .el-tree-node__content .tree-btn,
.menu-tree .el-tree-node__content:hover .tree-btn {
  display: inline-block;
}
.childrenMenu {
  width: 70%;
  float: left;
  margin-top: 20px;
}
</style>
